<template>
  <div class="card-list">
    <a-row :gutter="24">
      
      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        
        <a-card
          class="project-list"
          style="margin-bottom: 24px;"
          :bordered="true"
          :title="msg+'列表'"
          :body-style="{ padding: 0}"
        >
        <a-col v-if="$route.params.params==3" :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <a-form  class="search-item" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" :form='searchform' @submit="handleSearch">
          <a-form-item label="运动员编码">
              <a-input-search
                type="text"
                @search="handleSearch"
                enter-button
                placeholder="请输入运动员编码"
                v-decorator="['athleteid', {rules: [{ required: true, pattern: /.*[^ ].*/, message: '请输入正确的运动员编码' }], validateTrigger: 'blur'}]"
              /> 
          </a-form-item>
        </a-form>
      </a-col>
          <a-list rowKey="id" :grid="{ lg: 3, md: 2, sm: 1, xs: 1}" :dataSource="dataSource">
            <a-list-item slot="renderItem" slot-scope="item">
              <template v-if="!item || item.id === undefined">
                <a-button class="new-btn" type="dashed" @click="AddVisible=true">
                  <a-icon type="plus" />
                  新增{{msg}}
                </a-button>
              </template>
              <template v-else>
                <a-card :hoverable="true" :key="item.id">
                  <a-card-meta @click="tabChange(item)">
                    <!-- <a-button type="dashed" icon="edit"></a-button> -->
                    <a slot="title">{{ item.name }}</a>
                    <a-avatar class="card-avatar" slot="avatar" :src="getimg(item.imgpath)" size="large" />
                    <div class="meta-content" slot="description"><span v-if="$route.params.params!==3">{{ submsg }}总数：{{item.amount}}</span></div>
                  </a-card-meta>
                  <template class="ant-card-actions" slot="actions">
                    <a v-if="$route.params.params!=3" @click="deploy(item)">配置管理员</a>
                    <a v-else @click="tabChange(item)">查看</a>
                    <a @click="deletePro(item)">删除</a>
                  </template>
                </a-card>
              </template>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col v-if="$route.params.params==3" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card title="训练情况" :bordered="true">
          <Chart id="practice" :data="practice" style="width:100%;height:300px"></Chart>
        </a-card>
      </a-col>
      <a-col
        v-if="$route.params.params==3"
        style="padding: 0 12px"
        :xl="12"
        :lg="24"
        :md="24"
        :sm="24"
        :xs="24"
      >
        <a-card title="队内成绩" :bordered="true">
          <Chart id="achievement" :data="achievement" style="width:100%;height:300px"></Chart>
        </a-card>
      </a-col>
    </a-row>
    <a-modal v-model="AddVisible" :title="msg" @ok="handleAddSubmit">
      <a-form
        id="formAdd"
        class="user-layout-login"
        ref="formAdd"
        :form="formAdd"
        @submit="handleAddSubmit"
      >
        <a-form-item style="margin-top:24px">
          <a-row type="flex">
            <a-col :span="5">{{msg}}{{msg=='项目'?'名称':'姓名'}}：</a-col>
            <a-col :span="16">
              <a-input
                type="text"
                placeholder="请输入添加名称"
                v-decorator="['addname', {rules: [{ required: true, pattern: /[A-Za-z]{2,20}|[\u4e00-\u9fa5]{1,10}/, message: '请输入正确的名称' }], validateTrigger: 'blur'}]"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item v-if='$route.params.params==3' style="margin-top:24px">
          <a-row type="flex">
            <a-col :span="5">运动员编码：</a-col>
            <a-col :span="16">
              <a-input
                type="text"
                placeholder="请输入添加编码"
                v-decorator="['addid', {rules: [{ required: true, pattern: /.*[^ ].*/, message: '请输入正确的编码' }], validateTrigger: 'blur'}]"
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model="DeployVisible" :title="msg" @ok="handleDeploySubmit">
      <a-form
        id="formDeployAdd"
        class="user-layout-login"
        ref="formDeploy"
        :form="formDeploy"
        @submit="handleDeploySubmit"
      >
        <a-form-item style="margin-top:24px">
          <a-row type="flex">
            <a-col :span="4">管理员A：</a-col>
            <a-col :span="16">
              <a-input
                type="text"
                placeholder="请输入管理员手机"
                v-decorator="['telA', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号' }], initialValue:clickitem.adminA,validateTrigger: 'change'}]"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <a-row type="flex">
            <a-col :span="4">管理员B：</a-col>
            <a-col :span="16">
              <a-input
                type="text"
                placeholder="请输入管理员手机"
                v-decorator="['telB', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号' }], initialValue:clickitem.adminB,validateTrigger: 'change'}]"
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import Chart from "@/components/chart.vue";
export default {
  mounted() {
    //获取当前路由参数
    const flag = parseInt(this.$route.params.params);
    switch (flag) {
      //这里根据登录拿到用户信息,发送第一次请求获得初始数据,然后在每次切换卡片的时候发送请求获得数据,我们不关心路径,我们只关心
      //每次切换卡片的时候拿到的数据
      case 1:
        this.msg = "项目";
        this.submsg='队伍'
        this.$api.project
          .searchClassB({ classaname: this.$store.state.classa.name })
          .then(res => {
            this.dataSource = [{}, ...res.data.data];
          });
        break;
      case 2:
        this.msg = "队伍";
        this.submsg='运动员'
        this.$api.project
          .searchClassC({
            classaname: this.$store.state.classa.name,
            classbname: this.$store.state.classb.name
          })
          .then(res => {
            this.dataSource = [{}, ...res.data.data];
          });
        break;
      case 3:
        this.dataSource.push({});
        this.msg = "运动员";
        this.$api.project
          .searchAthlete({
            classaname: this.$store.state.classa.name,
            classbname: this.$store.state.classb.name,
            classcname: this.$store.state.classc.name
          })
          .then(res => {
            this.dataSource = [{}, ...res.data.data];
          });
        break;
    }
  },
  components: {
    Chart
  },
  name: "CardList",
  data() {
    return {
      clickitem: {},
      DeployVisible: false,
      AddVisible: false,
      dataSource: [],
      searchform:this.$form.createForm(this),
      formAdd: this.$form.createForm(this),
      formDeploy: this.$form.createForm(this),
      msg: "",
      submsg:'',
      achievement: {
        legend: {},
        tooltip: {},
        backgroundColor: "transparent",
        dataset: {
          source: [
            ["name",'成绩'],
            ["历史最好成绩", 1],
            ["累加平均成绩", 9],
            ["历史最坏成绩", 3],
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},

        series: [{ type: "bar" }]
      },
      practice: {
        color: [
          "#c23531",
          "#2f4554",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3"
        ],
        backgroundColor: "transparent",
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        }
        },
        legend: {
          data: ["平均成绩"]
        },
        xAxis: {
          type: "category",
          data: [
            "4-1",
            "4-2",
            "4-3",
            "4-4",
            "4-5",
            "4-6",
            "4-7",
            "4-8",
            "4-9",
            "4-10",
            "4-11",
            "4-12"
          ]
        },
        yAxis: {
          type: "value",
          name: "举重/kg",
          axisLine: {
            symbol: ["none", "arrow"]
          }
        },
        series: [
          {
            name: "平均成绩",
            type: "line",
            lineStyle: {
              color: "#c23531"
            },
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          }
        ]
      }
    };
  },
  methods: {
    getimg(path){
      if(path==null)
      return '../../assets/avator.png'
      else
      return 'http://139.9.118.119:9999/showimg/?imgpath='+path
    },
    handleSearch(){},
    handleAddSubmit(item) {
      this.formAdd.validateFields((err, values) => {
        if (!err) {
          const flag = parseInt(this.$route.params.params);
          switch (flag) {
            case 1:
              this.$api.project
                .addClassB({
                  name: values.addname,
                  classaname: this.$store.state.classa.name
                })
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "添加项目成功",
                      duration: 8
                    });
                    this.dislay();
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            case 2:
              this.$api.project
                .addClassC({
                  name: values.addname,
                  classaname: this.$store.state.classa.name,
                  classbname: this.$store.state.classb.name
                })
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "添加队伍成功",
                      duration: 8
                    });
                    this.dislay();
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            case 3:
              this.$api.project
                .addAthlete([{
                  name: values.addname,
                  id:values.addid,
                  classaname: this.$store.state.classa.name,
                  classbname: this.$store.state.classb.name,
                  classcname: this.$store.state.classc.name
                }])
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "添加成员成功",
                      duration: 8
                    });
                    this.dislay()
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            default:
              break;
          }
          values.addname = "";
          this.AddVisible = false;
        }
      });
    },
    handleDeploySubmit() {
      let item = this.clickitem;
      console.log(this.formDeploy.validateFields);
      this.formDeploy.validateFields((err, values) => {
        if (!err) {
          const flag = parseInt(this.$route.params.params);
          switch (flag) {
            case 1:
              this.$api.project
                .deployAdminB({
                  admina: values.telA,
                  adminb: values.telB,
                  classbid: item.id
                })
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "配置项目管理员成功",
                      duration: 8
                    });
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            case 2:
              this.$api.project
                .deployAdminC({
                  admina: values.telA,
                  adminb: values.telB,
                  classcid: item.id
                })
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "配置队伍管理员成功",
                      duration: 8
                    });
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            case 3:
              this.$api.project
                .addAthlete({
                  name: values.addname,
                  classaname: this.$store.state.classa.name,
                  classbname: this.$store.state.classb.name,
                  classcname: this.$store.state.classcname
                })
                .then(res => {
                  if (res.data.code != 1000) this.requestFailed(res);
                  else {
                    this.$notification["success"]({
                      message: "提示",
                      description: "添加成员成功",
                      duration: 8
                    });
                    this.dataSource = [{}, ...res.data.data];
                  }
                })
                .catch(err => {
                  this.requestFailed(err);
                });
              break;
            default:
              break;
          }
          values.addname = "";
          this.AddVisible = false;
        }
        console.log(values)
      });
      this.DeployVisible = false;
    },
    tabChange(item) {
      const flag = parseInt(this.$route.params.params);
      switch (flag) {
        case 1:
          this.$store.commit("setClassB", item);
          this.$store.commit("setGrade", 2);
          this.$router.push({ name: "sports", params: { params: 2 } });
          break;
        case 2:
          this.$store.commit("setClassC", item);
          this.$store.commit("setGrade", 3);
          this.$router.push({ name: "sports", params: { params: 3 } });
          break;
        case 3:
          this.$store.commit("setAthlete", item.id);
          this.$store.commit("setAthleteName", item.name);
          this.$router.push({ name: "account" });
          break;
        default:
          break;
      }
    },
    display() {
      //获取当前路由参数
      const flag = parseInt(this.$route.params.params);
      switch (flag) {
        //这里根据登录拿到用户信息,发送第一次请求获得初始数据,然后在每次切换卡片的时候发送请求获得数据,我们不关心路径,我们只关心
        //每次切换卡片的时候拿到的数据
        case 1:
          this.msg = "项目";
          this.$api.project
            .searchClassB({ classaname: this.$store.state.classa.name })
            .then(res => {
              this.dataSource = [{}, ...res.data.data];
            });
          break;
        case 2:
          this.msg = "队伍";
          this.$api.project
            .searchClassC({
              classaname: this.$store.state.classa.name,
              classbname: this.$store.state.classb.name
            })
            .then(res => {
              this.dataSource = [{}, ...res.data.data];
            });
          break;
        case 3:
          this.dataSource.push({});
          this.msg = "运动员";
          this.$api.project
            .searchAthlete({
              classaname: this.$store.state.classa.name,
              classbname: this.$store.state.classb.name,
              classcname: this.$store.state.classc.name
            })
            .then(res => {
              this.dataSource = [{}, ...res.data.data];
            });
          break;
      }
    },
    deploy(item) {
      this.DeployVisible = true;
      this.clickitem = item;
    },
    deletePro(item) {
      const flag = parseInt(this.$route.params.params);
      switch (flag) {
        case 1:
          this.$api.project
            .deleteClassB({
              classbid: item.id
            })
            .then(res => {
              if (res.data.code != 1000) this.requestFailed(res);
              else {
                this.$notification["success"]({
                  message: "提示",
                  description: "删除项目成功",
                  duration: 8
                });
              }
            })
            .catch(err => {
              this.requestFailed(err);
            });
          break;
        case 2:
          this.$api.project
            .deleteClassC({
              classcid: item.id
            })
            .then(res => {
              if (res.data.code != 1000) this.requestFailed(res);
              else {
                this.$notification["success"]({
                  message: "提示",
                  description: "删除队伍成功",
                  duration: 8
                });
              }
            })
            .catch(err => {
              this.requestFailed(err);
            });
          break;
        case 3:
          this.$api.project
            .deleteAthlete({
              id: item.id
            })
            .then(res => {
              if (res.data.code != 1000) this.requestFailed(res);
              else {
                this.$notification["success"]({
                  message: "提示",
                  description: "删除成员成功",
                  duration: 8
                });
                this.dataSource = [{}, ...res.data.data];
              }
            })
            .catch(err => {
              this.requestFailed(err);
            });
          break;
        default:
          break;
      }
      this.dislay();
    },
    requestFailed(err) {
      this.$notification["error"]({
        message: "错误",
        description: err.data.msg || "请求出现错误，请稍后再试",
        duration: 4
      });
      this.registerBtn = false;
    }
  }
};
</script>
<style>
.search-item .ant-form-item{
  margin-bottom: 0 !important;
}
</style>
<style lang="scss" scoped>
.card-list {
  /deep/ .ant-card-body:hover {
    .ant-card-meta-title > a {
      color: #aaabac;
    }
  }

  /deep/ .ant-card-meta-title {
    margin-bottom: 12px;

    & > a {
      display: inline-block;
      max-width: 100%;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  /deep/ .meta-content {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 1em;
  }
}

.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}

.ant-card-actions {
  background: #f7f9fa;

  li {
    float: left;
    text-align: center;
    margin: 12px 0;
    color: rgba(0, 0, 0, 0.45);
    width: 50%;

    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }

    a {
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
      display: inline-block;
      width: 100%;
      &:hover {
        color: #aaabac;
      }
    }
  }
}

.new-btn {
  background-color: #fff;
  border-radius: 2px;
  width: 100%;
  height: 188px;
}
</style>
